<template>
    <div >
        <div style="padding: 20px"  >
            <el-row :gutter="10" style="float: left;padding: 10px 18px">
                    <el-card>
                        <div id="browserHistory" :style="{width: '500px', height: '500px'}"></div>
                    </el-card>
            </el-row>
            <el-row :gutter="10" style="float: left;padding: 10px 18px">
                    <el-card>
                        <div id="bookrack" :style="{width: '500px', height: '500px'}"></div>
                    </el-card>
            </el-row>
            <el-row :gutter="10" style="float: left;padding: 10px 18px">
                    <el-card>
                        <div id="favorite" :style="{width: '500px', height: '500px'}"></div>
                    </el-card>
            </el-row>
            <el-row :gutter="10" style="float: left;padding: 10px 18px">
                    <el-card>
                        <div id="message" :style="{width: '500px', height: '500px'}"></div>
                    </el-card>
            </el-row>
        </div>
    </div>
</template>

<script>

    import request from "../../utils/request";
    export default {

        name: "Data",
        mounted() {
            this.browserHistory();
            this.bookrack();
            this.favorite();
            this.message();
        },
        methods: {
            browserHistory() {
                // 基于准备好的dom，初始化echarts实例
                let browserHistory = this.$root.echarts.init(document.getElementById('browserHistory'))
                let option = {
                    title: {
                        text: '各书籍浏览比例统计图',
                        subtext: '浏览总数据',
                        left: 'left'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'horizontal',
                        trigger: 'item',
                        left: 'center',
                top:"50px"
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: '用户比例',
                            type: 'pie',
                            radius: [50, 150],
                            center: ['50%', '60%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: []
                        }
                    ]
                }
                request.get("/browserHistory/count").then(res => {
                    console.log(res)
                    if (res.code === '0') {
                        res.data.forEach(item => {
                            option.series[0].data.push({name: item.name, value: item.count})
                        })
                        // 绘制图表
                        browserHistory.setOption(option);
                    }
                })

            },

            bookrack() {
                // 基于准备好的dom，初始化echarts实例
                let bookrack = this.$root.echarts.init(document.getElementById('bookrack'))
                let option = {
                    title: {
                        text: '各书籍加入书架比例统计图',
                        subtext: '书架总数据',
                        left: 'left'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'horizontal',
                        trigger: 'item',
                        left: 'center',
                top:"50px"
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: '加入书架比例',
                            type: 'pie',
                            radius: [50, 150],
                            center: ['50%', '60%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: []
                        }
                    ]
                }
                request.get("/bookrack/count").then(res => {
                    console.log(res)
                    if (res.code === '0') {
                        res.data.forEach(item => {
                            option.series[0].data.push({name: item.name, value: item.count})
                        })
                        // 绘制图表
                        bookrack.setOption(option);
                    }
                })

            },
            favorite() {
                // 基于准备好的dom，初始化echarts实例
                let favorite = this.$root.echarts.init(document.getElementById('favorite'))
                let option = {
                    title: {
                        text: '各书籍加入书架比例统计图',
                        subtext: '书架总数据',
                        left: 'left'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'horizontal',
                        trigger: 'item',
                        left: 'center',
                top:"50px"
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: '加入书架比例',
                            type: 'pie',
                            radius: [50, 150],
                            center: ['50%', '60%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: []
                        }
                    ]
                }
                request.get("/favorite/count").then(res => {
                    console.log(res)
                    if (res.code === '0') {
                        res.data.forEach(item => {
                            option.series[0].data.push({name: item.name, value: item.count})
                        })
                        // 绘制图表
                        favorite.setOption(option);
                    }
                })

            },message() {
                // 基于准备好的dom，初始化echarts实例
                let message = this.$root.echarts.init(document.getElementById('message'))
                let option = {
                    title: {
                        text: '各书籍加入书架比例统计图',
                        subtext: '书架总数据',
                        left: 'left'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'horizontal',
                        trigger: 'item',
                        left: 'center',
                top:"50px"
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: '加入书架比例',
                            type: 'pie',
                            radius: [50, 150],
                            center: ['50%', '60%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: []
                        }
                    ]
                }
                request.get("/message/count").then(res => {
                    console.log(res)
                    if (res.code === '0') {
                        res.data.forEach(item => {
                            option.series[0].data.push({name: item.name, value: item.count})
                        })
                        // 绘制图表
                        message.setOption(option);
                    }
                })

            },
        }
    }
</script>

<style scoped>

</style>